<template>
  <div class="rated">
    <p class="title">最受好评电影</p>
    <!-- 套了一个div，当作容器 -->
    <div class="wrapper">
      <ul class="rated-list">
        <li v-for="item in ratedList" :key="item._id">
          <img :src="item.imgUrl" alt="" />
          <p>{{ item.title }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// 用于滚动
import BetterScroll from "better-scroll";
import { mapState, mapActions } from "vuex";
export default {
  // computed: mapState(["ratedList"]),
  computed: mapState({
    ratedList: (state) => state.index.ratedList,
  }),
  methods: mapActions("index", ["getRatedListAsync"]),
  mounted() {
    // .then的时候就是数据请求成功了
    this.getRatedListAsync().then(() => {
      new BetterScroll(".wrapper", {
        scrollX: true,
        scrollY: false,
        click: true,
      });
    });
  },

  // data() {
  //   return {
  //     ratedList: [],
  //   };
  // },
  // mounted() {
  //   this.getRatedData();
  // },
  // methods: {
  //   async getRatedData() {
  //     const res = await getRatedApi();
  //     if (res.status === 0) {
  //       this.ratedList = res.result;
  //       // 等待渲染完成，渲染完成后，宽度就有了
  //       await this.$nextTick();
  //       // betterscroll的添加时机应该是在数据获取完之后
  //       new BetterScroll(".wrapper", {
  //         scrollX: true,
  //         scrollY: false,
  //         click: true,
  //       });
  //     }
  //   },
  // },
};
</script>

<style lang="less" scoped>
@import "../../../assets/css/var.less";
.rated {
  height: 200px;
  background: #fff;
  padding: 12px 15px 12px 15px;
  margin-bottom: 10px;

  .title {
    margin: 0;
    font-size: 14px;
    color: #333;
    margin-bottom: 12px;
  }

  .wrapper {
    width: 100%;
    height: 145px;
    // 吧auto改成hidden
    overflow: hidden;
  }

  .rated-list {
    height: 145px;
    display: inline-flex;

    li {
      width: 85px;
      height: 100%;
      flex-shrink: 0;
      margin-right: 10px;

      img {
        width: 85px;
        height: 115px;
      }

      p {
        font-size: 14px;
        width: 100%;
        .ellipsis();
      }
    }
  }
}
</style>
